<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="1000" @ok="handleSubmit">
      <div style="display:flex;">
            <BasicTable @register="registerTable" :rowSelection="rowSelection">
            </BasicTable>
      </div>
  </BasicModal>
</template>

<script lang="ts" setup>
    import {ref, computed, unref, reactive} from 'vue';
    import { toRaw } from '@vue/reactivity';
    import {BasicTable, useTable, TableAction} from '/@/components/Table';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import {BasicForm, useForm} from '/@/components/Form/index';
    import { useListPage } from '/@/hooks/system/useListPage'
    import {formSchema,deviceResultColumns,deviceResultSearchFormSchema} from '../generalAuthorization.data';
    import {saveOrUpdate,deviceList,ruleList,addRuleApi,deviceResultList} from '../generalAuthorization.api';
    import { message } from 'ant-design-vue';
import { number } from 'vue-types';

    // Emits声明
    const emit = defineEmits(['register','success']);
    const isUpdate = ref(true);

    let ruleOptions= ref([])
    let rowId= ref('')

    //表单赋值
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        //重置表单
        // await resetFields();
        // getRuleList();
        //    getAuthDetailApi({
    //    }).then(res=>{
    //     ruleOptions.value = res.records
    //  await setFieldsValue({
    //             ...data.record,
    //         });
    //    })
        rowId.value = data.id
        setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
        isUpdate.value = !!data?.isUpdate;
        if (unref(isUpdate)) {
            //表单赋值
            await setFieldsValue({
                ...data.record,
            });
        }
        // 隐藏底部时禁用整个表单
       setProps({ disabled: !data?.showFooter })
    });
    const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
      tableProps:{
        //    title: '下发设备查看',
           api: deviceResultList,
           columns :deviceResultColumns,
           canResize:false,
           showActionColumn:false,
           formConfig: {
              labelWidth: 65,
              schemas: deviceResultSearchFormSchema,
              autoSubmitOnEnter:true,
              showAdvancedButton:true,
              fieldMapToNumber: [
              ],
              fieldMapToTime: [
              ],
            },
            searchInfo:{
                authId:rowId
            },
           actionColumn: {
               width: 120,
               fixed:'right'
            },
      },
     
  })
  
  const [registerTable, {reload,getForm},{  }] = tableContext

    //表单配置
    const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({
        labelWidth: 150,
        schemas: formSchema,
        showActionButtonGroup: false,
        baseColProps: {span: 12}
    });
    
    //设置标题
    const title = computed(() => (!unref(isUpdate) ? '下发设备查看' : '下发设备查看'));
    //表单提交事件
    async function handleSubmit(v) {
        try {
            let values = await validate();
            // let selectIds = toRaw(rowSelection.selectedRowKeys)
            // console.log(selectIds);
            // if(selectIds.length==0) return message.warning('请先选择设备');
            // // selectIds.forEach(item=>{
            // //     item = Number(item)
            // // })
            // values.deviceList = selectIds
            // values.groupIdList = values.groupIdList.split(',')

            // console.log(values);
            // await addRuleApi(values)
            setModalProps({confirmLoading: true});

            //提交表单
            // return
            // await saveOrUpdate(values, isUpdate.value);
            //关闭弹窗
            closeModal();
            //刷新列表
            emit('success');
        } finally {
            setModalProps({confirmLoading: false});
        }
    }
    function getRuleList(){
       ruleList({
       }).then(res=>{
        ruleOptions.value = res.records
       })
    }
    function getDetail(){
    //    getAuthDetailApi({
    //    }).then(res=>{
    //     ruleOptions.value = res.records
    //    })
    }
</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number){
		width: 100%
	}

	:deep(.ant-calendar-picker){
		width: 100%
	}
</style>
